<template>
  <div class="upload-file-modal">
    <i class="close ri-close-fill" @click="closeModal" v-if="false"></i>
    <div class="upload-file-title">
      <p>文件导入</p>
    </div>
    <div class="upload-file-content">
      <el-upload
        action="#"
        accept=".xmind,.gmind,.json"
        :multiple="false"
        :show-file-list="false"
        :before-upload="beforeFileUpload"
        :http-request="handleFileChange"
      >
        <div class="upload-block" v-show="!uploadFileName">
          <p class="upload-drag-icon">
            <img src="@/assets/images/new-drag-and-drop-file.png" alt="">
          </p>
          <p class="upload-text">将文件拖到此处或者<span>点击上传</span></p>
        </div>
        <div class="file-name" v-show="uploadFileName">{{ uploadFileName }}</div>
      </el-upload>
      <div class="upload-tip">支持格式：Gmind、Xmind、Json</div>
      <div class="map-import-position" v-show="parseJsonList.length">
        <el-radio-group v-model="importType">
          <el-radio value="replace" size="small">替换当前画布</el-radio>
          <el-radio value="push" :disabled="canvasList.length >= 5" size="small">导入新画布</el-radio>
        </el-radio-group>
      </div>
      <div class="xmind-map-list" v-show="xmindExtensionsRegex.test(uploadFileName) && parseJsonList.length">
        <p>画布选择</p>
        <el-select
          v-model="xmindMapId"
          placeholder="青选择需要导入的画布"
          style="width: 200px"
        >
          <el-option v-for="item in parseJsonList" :label="item.title" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <footer v-show="parseJsonList.length">
      <el-button @click="closeModal">取消</el-button>
      <el-button type="primary" :disabled="!parseJsonList.length" @click="importXmindFile">确定</el-button>
    </footer>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { ElMessage as message } from 'element-plus'
import { isValidMindJson } from '@/utils/validate'
import { xmindTransformToJson, gmindJsonTransformToJson, xmindJsonToGmindJson } from '../export/parse'

const emits = defineEmits(['new-map', 'close'])
defineProps({
  canvasList: {
    type: Array,
    default: () => []
  }
})

const xmindExtensionsRegex = /(\.xmind)$/i
const gmindExtensionsRegex = /(\.gmind|\.json)$/i
const uploadFileName = ref(null)
const importType = ref('replace')
const parseJsonList = ref([])
const xmindMapId = ref(null)
const xmindZipFiles = ref(null)

function beforeFileUpload (file) {
  const xmindExtensionsRegex = /(\.gmind|\.xmind|\.json)$/i
  const isXmindFile = xmindExtensionsRegex.test(file.name)
  if (!isXmindFile) {
    message.error('只能上传.gmind、.xmind、.json格式的文件')
  }
  return isXmindFile
}

async function handleFileChange (file) {
  uploadFileName.value = file.file.name
  try {
    if (xmindExtensionsRegex.test(uploadFileName.value)) {
      const { xmindJson, zipFiles } = await xmindTransformToJson(file.file)
      parseJsonList.value = xmindJson
      xmindMapId.value = xmindJson[0].id
      xmindZipFiles.value = zipFiles
    } else if (gmindExtensionsRegex.test(uploadFileName.value)) {
      const data = await gmindJsonTransformToJson(file.file)
      parseJsonList.value = [data]
    }
  } catch (error) {
    message.error(error.message)
  }
}

async function importXmindFile () {
  if (gmindExtensionsRegex.test(uploadFileName.value)) {
    emits('new-map', {
      ...parseJsonList.value[0],
      createTime: new Date(),
      eventTransform: null
    }, importType.value)
  } else if (xmindExtensionsRegex.test(uploadFileName.value)) {
    const t = parseJsonList.value.find(o => o.id === xmindMapId.value)
    const parseXmindJson = await xmindJsonToGmindJson(t, xmindZipFiles.value)
    if (!isValidMindJson(parseXmindJson)) {
      return message.error('该文件无法正常打开，请勿修改并保存，否则文件内容将会永久性丢失！')
    }
    emits('new-map', {
      ...parseXmindJson,
      createTime: new Date(),
      eventTransform: null
    }, importType.value)
  }
  closeModal()
}

function closeModal () {
  emits('close')
}
</script>
